<template>
  <div class="h-full overflow-auto">
    <ProbCommentList :problem-id="problemId" :immediate="true">
      <!-- <template #func>
        <n-button @click="navAddComment">写题解</n-button>
      </template> -->

      <template #default="slotProps">
        <div v-show="slotProps.comments.length > 0" class="flex flex-col">
          <template v-for="comment in slotProps.comments" :key="comment.id">
            <ProbCommentListItem
              :id="comment.id"
              :title="comment.title"
              :content="comment.textContent"
              @click-item="navCommentDetail"
            ></ProbCommentListItem>
          </template>
        </div>
        <div v-show="slotProps.comments.length === 0">暂时没有题解</div>
      </template>
    </ProbCommentList>
  </div>
</template>

<script setup>
import { lStorage } from '@/utils'
import ProbCommentList from '@/components/problem-comment/ProbCommentList.vue'
import ProbCommentListItem from '@/components/problem-comment/ProbCommentListItem.vue'

const { examId, problemId } = inject('problem/idsValue', {})

const navAddComment = () => {
  const storedLang = lStorage.get('code-language') || ''
  window.open(
    `http://${window.location.host}/#/user/add-comment/${problemId}?lang=${encodeURIComponent(
      storedLang
    )}`,
    '_blank'
  )
}

const navCommentDetail = (id) => {
  window.open(
    `http://${window.location.host}/#/user/comment-detail/${id}?problemId=${problemId}&examId=${examId}`,
    '_blank'
  )
}
</script>
